import React from "react";
import { BrowserRouter, Router, Route, Link } from "react-router-dom";
import "./Home.css";
import LeftBottom from "./LeftBottom";
import RightTop from "./RightTop";
import RightBottom from "./RightBottom";
import Swiper from "./Swiper";
import LeftTop from "./LeftTop";
import Image from "./Imgae";
function Home() {
  return (
    <div className="Home">
      <header>
        <img src="/public/images/Top.png" alt="" />
      </header>
      <main>
        {/* 左侧布局 */}
        <div className="m-Left">
          <div className="m-l-top">
            <div className="l-t-Top">环境监测</div>
            <div className="l-t-Bottom">
              <LeftTop></LeftTop>
            </div>
          </div>
          <div className="m-l-bottom">
            <div className="l-b-Top">学生分布情况</div>
            <div className="l-b-Bottom">
              <LeftBottom></LeftBottom>
            </div>
          </div>
        </div>
        {/* 中间布局 */}
        <div className="m-Canter" style={{ height: "100vh" }}>
          {/* 3D轮播图 */}
          <div className="Top1">
            <Swiper></Swiper>
          </div>
          {/* 导航栏 */}
          <footer>
            <dl>
              <dt>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9e0590189428a8ffee7819064b1f152c705249b1f3e3fe804fa6741376c41353"
                  alt=""
                />
              </dt>
              <dd>智能检测</dd>
            </dl>
            <dl>
              <dt>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4ce04898f7dd6a02dfcf4ed394c316356fe39dc2ac66531bb7bccca6d2c30dfb"
                  alt=""
                />
              </dt>
              <dd>
                {/* 就业态势 */}
                <Link className="dd1" to={"/Obtain"}>
                  就业态势
                </Link>
              </dd>
            </dl>
            <dl>
              <dt>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8114ee381228a95d458fa185b435fb87df428e434979145cf8e9b82087b6c0a8"
                  alt=""
                />
              </dt>
              {/* 安防管理 */}
              <dd>
                <Link className="dd1" to={"/Security"}>
                  安防管理
                </Link>
              </dd>
            </dl>
            <dl>
              <dt>
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9b28ec4ea1957dcd2e78b4ac6cb6c08234bef6c2198a86921418d393d00a88ce"
                  alt=""
                />
              </dt>
              {/* 设备运维 */}
              <dd>
                <Link className="dd1" to={"Device"}>
                  设备运维
                </Link>
              </dd>
            </dl>
          </footer>
        </div>
        {/* 右侧布局 */}
        <div className="m-Right">
          <div className="m-r-top">
            <div className="r-t-Top">
              <p>水电总量</p>
            </div>
            <div className="r-t-Bottom">
              <div className="top1">
                <p className="p1">
                  <Image src="/public/images/水.png"></Image>
                  <span>总用电量 72670</span>
                </p>
                <p className="p1">
                  <Image src="/public/images/电.png"></Image>
                  <span>总用水量 69035</span>
                </p>
              </div>
              <div className="bottom1">
                <RightTop></RightTop>
              </div>
            </div>
          </div>
          <div className="m-r-bottom">
            <div className="r-b-Top">
              <p>校园人员流动情况</p>
            </div>
            <div className="r-b-Bottom">
              <div className="top2">
                <dl className="dl1">
                  <dt>
                    <img src="/public/images/right_toDay.png" alt="" />
                  </dt>
                  <dd>
                    <p>1</p>
                    <p>昨日外来访客</p>
                  </dd>
                </dl>
                <dl className="dl1">
                  <dt>
                    <img src="/public/images/right_yestErday.png" alt="" />
                  </dt>
                  <dd>
                    <p>1</p>
                    <p>今日外来访客</p>
                  </dd>
                </dl>
              </div>
              <div className="bottom2">
                <RightBottom></RightBottom>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}
export default Home;
